  <template>
    <el-upload name="file" :show-file-list="false" accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
      :multiple="false" :http-request="uploadImage">
      <div class="cover_upload_btn">
        <template v-if="modelValue">
          <img :src="proxy.globalInfo.imageUrl + modelValue" alt="">
        </template>
        <span v-else class="iconfont icon-upload"></span>
      </div>
    </el-upload>
  </template>

<script setup>

import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()

const props = defineProps({
  modelValue: {
    type: String,
    default: null
  }
})

const emit = defineEmits()

const api = {
  uploadUrl: '/file/uploadImage'
}
const uploadImage = async (file) => {
  console.log(file);
  let res = await proxy.Request({
    url: api.uploadUrl,
    dataType: 'file',
    params: {
      file: file.file,
      type: 0,
    }
  })
  console.log(res.data.fileName);

  const fileName = res.data.fileName
  emit('update:modelValue', fileName)
  emit('callback', fileName)

}
</script>

<style lang="scss">
.cover_upload_btn {
  width: 150px;
  height: 150px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;

  .iconfont {
    font-size: 40px;
    color: #858383;
  }

  img {
    width: 100%;
  }
}
</style>